import { css } from '@emotion/css';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const BasicBarChart = () => {
  const ContainerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    console.log(ContainerRef.current);
    const myEcharts = echarts.init(ContainerRef.current);
    myEcharts.setOption({
      title: {
        text: 'Waterfall Chart',
        subtext: 'Living Expenses in Shenzhen',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        //自定义 tooltip   （提示）
        // formatter: function (params): string | HTMLElement | HTMLElement[] {
        //   var tar = params[1];
        //   return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        // },
      },
      grid: {
        // 图表与容器的各个方向上的距离
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        /// Axis  ˈæksɪs/    轴
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },

      series: [
        // 系列 /ˈsɪriːz/
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
      ],
    });
  });
  return (
    <div
      className={css`
        width: 640px;
        height: 400px;
      `}
      ref={ContainerRef}
    ></div>
  );
};

export default BasicBarChart;
